<template>
  <ContentWrap title="搜索">
    <el-form :inline="true">
      <el-form-item label="姓名:">
        <el-input clearable style="width: 250px" v-model="SearchDict.name" placeholder="请输入" />
      </el-form-item>
      <el-form-item label="作品名称:">
        <el-input clearable style="width: 250px" v-model="SearchDict.title" placeholder="请输入" />
      </el-form-item>
      <el-form-item label="状态:">
        <el-select v-model="SearchDict.state" filterable placeholder="请选择" style="width: 120px">
          <el-option
            v-for="(item, idx) in StateOption"
            :key="idx"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="danger" @click="resetSearch">重置</el-button>
        <el-button type="primary" @click="getTableData">搜索</el-button>
      </el-form-item>
    </el-form>
  </ContentWrap>

  <ContentWrap title="列表" class="space-y-20px">
    <el-table v-loading="tableLoading" :data="tableData" border class="space-top" stripe>
      <el-table-column label="序号" prop="list_id" />
      <el-table-column label="作品名称" prop="title" />
      <el-table-column label="用户" prop="name" />
      <el-table-column label="图片">
        <template #default="scope">
          <el-image
            v-for="(item, idx) in scope.row.img_data"
            :key="'iu' + idx"
            style="width: 30px; height: 30px"
            :src="item.img_url"
            :zoom-rate="1.2"
            :max-scale="7"
            :min-scale="0.2"
            :preview-src-list="[item.img_url]"
            :initial-index="4"
            fit="cover"
          />
        </template>
      </el-table-column>
      <el-table-column label="图片张数">
        <template #default="scope">
          {{ scope.row.img_data ? scope.row.img_data.length : 0 }}
        </template>
      </el-table-column>
      <el-table-column label="状态">
        <template #default="scope">
          <el-tag v-if="scope.row.state === 1" type="primary">待审核</el-tag>
          <el-tag v-else-if="scope.row.state === 2" type="success">已通过</el-tag>
          <el-tag v-else-if="scope.row.state === 3" type="danger">已驳回</el-tag>
          <p style="font-size: 12px" v-if="scope.row.state === 3"
            >驳回理由: {{ scope.row.refuse_reason }}</p
          >
        </template>
      </el-table-column>
      <el-table-column label="上传日期" prop="created_at" />
      <el-table-column label="操作">
        <template #default="scope">
          <div class="action-btns">
            <div @click="openDetail(scope.row)">详情</div>
            <div class="pass-btn" v-if="scope.row.state !== 2" @click="passWork(scope.row)"
              >通过
            </div>
            <div class="reject-btn" v-if="scope.row.state !== 3" @click="rejectWork(scope.row)"
              >拒绝
            </div>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      v-model:current-page="SearchDict.page"
      v-model:page-size="SearchDict.page_size"
      :total="total"
      background
      class="mt-4 flex-center"
      layout="total, prev, pager, next, sizes, jumper"
      small
      @current-change="pageChange"
      @size-change="sizeChange"
    />
  </ContentWrap>

  <!-- 摄影详情 -->
  <PhotoDetail :show="showDetail" :list-id="listId" :state="listState" @close="closeDetail" />
</template>

<script setup lang="ts">
import { ContentWrap } from '@/components/ContentWrap'
import { onMounted, reactive, ref } from 'vue'
import request from '@/utils/request'
import PhotoDetail from '@/views/Photo/components/PhotoDetail.vue'
import { ElMessageBox, ElNotification } from 'element-plus'
import { cloneDeep } from 'lodash-es'

const StateOption = [
  { label: '待审核', value: 1 },
  { label: '审核通过', value: 2 },
  { label: '审核拒绝', value: 3 }
]

// 通过作品
const updateListData = reactive({
  list_id: 0,
  state: 0,
  refuse_reason: ''
})

const passWork = (item) => {
  updateListData.state = 2
  updateListData.list_id = item.list_id

  ElMessageBox.confirm('确认通过该作品吗?', '提示', {
    showCancelButton: true,
    closeOnClickModal: true,
    callback(value, action) {
      if (value === 'confirm') {
        request({
          url: 'photo/list/update',
          method: 'post',
          data: updateListData
        }).then((res) => {
          if (res.code === 200) {
            ElNotification.success('通过成功!')
            getTableData()
          } else {
            ElNotification.error(res.msg)
          }
        })
      }
    }
  })
}

// 驳回作品
const rejectWork = (item) => {
  updateListData.state = 3
  updateListData.list_id = item.list_id

  ElMessageBox.prompt('确认驳回该作品吗?', '提示', {
    showCancelButton: true,
    closeOnClickModal: true,
    inputPattern: /\S/,
    inputPlaceholder: '请输入驳回理由',
    inputErrorMessage: '驳回理由不能为空'
  })
    .then((value) => {
      console.log(value)
      updateListData.refuse_reason = value.value
      if (value.action === 'confirm') {
        request({
          url: 'photo/list/update',
          method: 'post',
          data: updateListData
        }).then((res) => {
          if (res.code === 200) {
            ElNotification.success('驳回成功!')
            getTableData()
          } else {
            ElNotification.error(res.msg)
          }
        })
      }
    })
    .catch(() => {})
}

const SearchDict = ref({
  name: '',
  title: '',
  page: 1,
  page_size: 10,
  state: ''
})

const tableLoading = ref(false)
const tableData = ref([])
const total = ref(0)

const resetSearch = () => {
  SearchDict.value = {
    name: '',
    title: '',
    page: 1,
    page_size: 10,
    state: ''
  }
  getTableData()
}

const getTableData = () => {
  tableLoading.value = true
  let dict = cloneDeep(SearchDict.value)
  console.log(dict.page)
  dict.state = parseInt(SearchDict.value.state)
  request({
    url: 'photo/list',
    method: 'post',
    data: dict
  }).then((res) => {
    tableLoading.value = false
    if (res.code === 200) {
      tableData.value = res.data
      total.value = res.count
    }
  })
}

const pageChange = (page: number) => {
  SearchDict.value.page = page
  getTableData()
}

const sizeChange = (size) => {
  SearchDict.value.page_size = size
  getTableData()
}

// 打开摄影详情
const showDetail = ref(false)
const listId = ref(0)
const listState = ref(0)
const openDetail = (item) => {
  showDetail.value = true
  listId.value = item.list_id
  listState.value = item.state
}

// 关闭详情
const closeDetail = () => {
  showDetail.value = false
}

onMounted(() => {
  getTableData()
})
</script>

<style scoped lang="less">
.action-btns {
  display: flex;
  flex-direction: row;

  div {
    margin-right: 10px;
    cursor: pointer;
  }

  div:hover {
    opacity: 0.7;
  }

  div:first-child {
    color: var(--el-color-primary);
  }

  .pass-btn {
    color: var(--el-color-success);
  }

  .reject-btn {
    color: var(--el-color-danger);
  }
}
</style>
